<template>
    <div class="rightKs">
        <ThemeTitle :title="title" />
        <!-- 实时预警 -->
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">实时预警</div>
            </div>
        </div>
        <!-- 实时预警 -->
        <div class="realTime">
            <div class="kuangshan">
                <div class="kuangshanL">矿山</div>
                <div class="kuangshanR">
                    <div v-for="(item, index) of kuangshanList" :key="index">
                        <div>{{ item.name }}</div>
                        <div>{{ item.value }}</div>
                    </div>
                </div>
            </div>
            <div class="weikuang">
                <div class="weikuangL">尾矿</div>
                <div class="weikuangR">
                    <div v-for="(item, index) of weikuangList" :key="index">
                        <div>{{ item.name }}</div>
                        <div>{{ item.value }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 报警趋势分析 -->
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">报警趋势分析</div>
            </div>
            <!-- tabs -->
            <div class="timeTabs">
                <div
                    v-for="(item, index) of timeList"
                    :key="index"
                    :class="{ active: currentTime == index }"
                    @click="handleTime(index)"
                >
                    {{ item }}
                </div>
            </div>
        </div>
        <!-- 报警趋势分析chart -->
        <div id="callPoliceChart"></div>
        <div id="callPoliceChart1"></div>
        <div id="callPoliceChart2"></div>
        <div class="rightRight">
            <!-- 井下人员定位预警 -->
            <div class="geoIntro">
                <div class="geoIntroTitle">
                    <div class="sideLine"></div>
                    <div class="geoIntroWord">井下人员定位预警</div>
                </div>
            </div>
            <!-- 井下人员定位预警表格 -->
            <div class="wellTable">
                <table border="1">
                    <tr>
                        <th>矿井名称</th>
                        <th>定员人数</th>
                        <th>超时报警</th>
                        <th>超员报警</th>
                        <th>本月累计报警</th>
                    </tr>
                    <tr v-for="(item, index) in tableList" :key="index">
                        <td v-for="(item1, index1) in item" :key="index1">
                            {{ item1 }}
                        </td>
                    </tr>
                </table>
            </div>
            <!-- 风险趋势预测 -->
            <div class="geoIntro">
                <div class="geoIntroTitle">
                    <div class="sideLine"></div>
                    <div class="geoIntroWord">风险趋势预测</div>
                </div>
            </div>
            <!-- 风险趋势预测列表 -->
            <div class="fengxianList">
                <div v-for="(item, index) in fengxianList" :key="index">
                    {{ item }}
                </div>
            </div>

            <!-- 视频查询 -->
            <div class="geoIntro">
                <div class="geoIntroTitle">
                    <div class="sideLine"></div>
                    <div class="geoIntroWord">视频查询</div>
                </div>
            </div>
            <!-- 视频查询列表 -->
            <div class="videoQuery">
                <div class="videoList">
                    <div
                        class="videoListItem"
                        v-for="(item, index) in videoList"
                        :key="index"
                    >
                        {{ item }}
                    </div>
                </div>

                <div class="video">
                    <img src="/data/images/jcyj/weikuangku.jpg" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import ThemeTitle from "../../common/ThemeTitle";
import {
    getCurrentInstance,
    onMounted,
    ref,
    provide,
    reactive,
    nextTick,
} from "vue";
import echarts from "echarts";
import axios from "axios";
export default {
    components: {
        ThemeTitle,
    },
    setup() {
        const title = provide("title", "安全生产风险监测预警");
        const { ctx } = getCurrentInstance();
        const numList = [2, 5, 1, 3, 8, 0];
        const tableList = [
            ["海南山金矿业", 100, 0, 1, 12],
            ["海南矿业有限公司", 110, 4, 5, 14],
        ];
        const kuangshanList = reactive([
            { name: "温度", value: "5/91" },
            { name: "co", value: "10/155" },
            { name: "开停", value: "4/94" },
            { name: "风速", value: "0/36" },
        ]);
        kuangshanList.forEach((item) => {});
        const weikuangList = reactive([
            { name: "库水位", value: "0/11" },
            { name: "降雨量", value: "0/13" },
            { name: "干滩长度", value: "35" },
            { name: "气象预警", value: "0" },
        ]);
        weikuangList.forEach((item) => {});
        const videoList = [
            "海南山金矿山有限公司",
            "海南矿业有限公司",
            "乐东抱伦二号尾矿库",
            "海南矿业有限公司",
            "乐东抱伦二号尾矿库",
        ];
        const fengxianList = [
            "红旗尾矿库，近三日水位上升0.3m，请加强监管巡查",
            "红色暴雨导致乐东抱伦尾矿库风险等级升为红色，请加强巡查",
            "红旗尾矿库，近三日水位上升0.3m，请加强监管巡查",
            "红色暴雨道中乐东抱伦尾矿库风险等级升为红色，请加强巡查",
        ];
        const timeList = ["今天", "本周", "本月"];

        let currentTime = ref(0);
        let x1 = [];
        let y1 = [];
        let x2 = [];
        let y2 = [];
        let x3 = [];
        let y3 = [];
        function handleTime(index) {
            currentTime.value = index;
            if (index == 0) {
                drawDuty(x1, y1, "callPoliceChart");
            } else if (index == 1) {
                drawDuty(x2, y2, "callPoliceChart");
            } else if (index == 2) {
                drawDuty(x3, y3, "callPoliceChart");
            }
        }
        let optionValue = "";
        function drawDuty(timeArr, dataArr, id) {
            var dom = document.getElementById(id);
            var myChart = echarts.init(dom);
            let option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        lineStyle: {
                            color: "#57617B",
                        },
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "5%",
                    top: "20%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                        data: timeArr,
                        // }, {
                        //     axisPointer: {
                        //         show: false
                        //     },
                        //     axisLine: {
                        //         lineStyle: {
                        //             color: '#57617B'
                        //         }
                        //     },
                        //     axisTick: {
                        //         show: false
                        //     },

                        //     position: 'bottom',
                        //     offset: 20,
                        // data: ['', '', '', '', '', '', '', '', '', '', {
                        //     value: '周六',
                        //     textStyle: {
                        //         align: 'left'
                        //     }
                        // }, '周日']
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "件",
                        nameTextStyle: {
                            fontSize: 12,
                            lineHeight: 15,
                            padding: -10,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                        axisLabel: {
                            margin: 10,
                            textStyle: {
                                fontSize: 14,
                                color: "#fff",
                            },
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: "#57617B",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "",
                        type: "line",
                        smooth: true,
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                width: 1,
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "rgba(0, 136, 212, 0.5)",
                                        },
                                        {
                                            offset: 0.8,
                                            color: "rgba(0, 136, 212, 0)",
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: "rgba(0, 0, 0, 0.1)",
                                shadowBlur: 10,
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: "rgb(0,136,212)",
                                borderColor: "rgba(0,136,212,0.2)",
                                borderWidth: 12,
                            },
                        },
                        data: dataArr,
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        }

        onMounted(() => {
            axios
                .post(
                    `http://172.25.110.34:81/foundation/union/subject/scrnAqscfxjcyj2/list`,
                    {}
                )
                .then((res) => {
                    let ksData = res.data.data[0];
                    //实时预警
                    //矿山
                    kuangshanList[0].value = ksData.ssyj2.ks.wd;
                    kuangshanList[1].value = ksData.ssyj2.ks.co;
                    kuangshanList[2].value = ksData.ssyj2.ks.kt;
                    kuangshanList[3].value = ksData.ssyj2.ks.fs;
                    //尾矿
                    weikuangList[0].value = ksData.ssyj2.wk.skw;
                    weikuangList[1].value = ksData.ssyj2.wk.jyl;
                    weikuangList[2].value = ksData.ssyj2.wk.gtcd;
                    weikuangList[3].value = ksData.ssyj2.wk.qxyj;
                    //报警趋势分析
                    x1 = ksData.bjqsfx.hour.map((item) => {
                        return item.lb;
                    });
                    y1 = ksData.bjqsfx.hour.map((item) => {
                        return item.dttj;
                    });

                    x2 = ksData.bjqsfx.week.map((item) => {
                        return item.week;
                    });
                    y2 = ksData.bjqsfx.month.map((item) => {
                        return item.bztj;
                    });
                    x3 = ksData.bjqsfx.week.map((item) => {
                        return item.date;
                    });
                    y3 = ksData.bjqsfx.month.map((item) => {
                        return item.bytj;
                    });
                    nextTick(() => {
                        if (window.screen.width > 2880) {
                            drawDuty(x1, y1, "callPoliceChart");
                            drawDuty(x2, y2, "callPoliceChart1");
                            drawDuty(x3, y3, "callPoliceChart2");
                        } else {
                            drawDuty(x1, y1, "callPoliceChart");
                        }
                    });
                    //井下人员定位

                    //风险趋势分析
                    //视频查询
                });
        });
        return {
            kuangshanList,
            weikuangList,
            timeList,
            tableList,
            fengxianList,
            videoList,
            title,
            handleTime,
            currentTime,
        };
    },
};
</script>
<style >
table,
table tr th,
table tr td {
    border: 1px solid #155e75;
}
</style>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .rightKs {
        .realTime {
            margin-top: vh(10);
            width: 100%;
            height: vh(150);
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            .kuangshan {
                display: flex;
                justify-content: space-between;

                .kuangshanL {
                    width: vw(69);
                    height: vh(68);
                    line-height: vh(68);
                    text-align: center;
                    background: url('/data/images/hngk/rece.png') no-repeat;
                    background-size: 100% 100%;
                }

                .kuangshanR {
                    width: vw(292);
                    height: vh(62);
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    div {
                        display: flex;
                        justify-content: space-around;
                        flex-direction: column;
                        height: vh(62);

                        div:nth-child(1) {
                            text-align: center;
                            color: rgba(173, 248, 255, 1);
                            font-size: vw(12);
                        }

                        div:nth-child(2) {
                            width: vw(55);
                            height: vh(23);
                            line-height: vh(23);
                            text-align: center;
                            background: url('/data/images/hngk/kuangshan.png') no-repeat;
                            background-size: 100% 100%;
                        }
                    }
                }
            }

            .weikuang {
                display: flex;
                justify-content: space-between;

                .weikuangL {
                    width: vw(69);
                    height: vh(68);
                    line-height: vh(68);
                    text-align: center;
                    background: url('/data/images/hngk/rece.png') no-repeat;
                    background-size: 100% 100%;
                }

                .weikuangR {
                    width: vw(292);
                    height: vh(62);
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    div {
                        display: flex;
                        justify-content: space-around;
                        flex-direction: column;
                        height: vh(62);

                        div:nth-child(1) {
                            text-align: center;
                            color: rgba(173, 248, 255, 1);
                            font-size: vw(12);
                        }

                        div:nth-child(2) {
                            text-align: center;
                            width: vw(55);
                            height: vh(23);
                            line-height: vh(23);
                            background: url('/data/images/hngk/kuangshan.png') no-repeat;
                            background-size: 100% 100%;
                        }
                    }
                }
            }
        }

        #callPoliceChart {
            width: vw(365);
            height: vh(130);
        }

        #callPoliceChart1 {
            display: none;
        }

        #callPoliceChart2 {
            display: none;
        }

        .rightRight {
            .wellTable {
                width: 100%;
                height: vh(120);

                table {
                    width: 100%;
                    height: vh(120);
                    line-height: vh(40);
                    text-align: center;
                    border-color: #155e75;
                    border-collapse: collapse;
                    font-size: vw(12);

                    tr:nth-child(1) {
                        height: vh(25);

                        th {
                            color: rgba(30, 212, 233, 1);
                            font-size: vw(14);
                        }
                    }

                    tr {
                        color: #fff;
                    }
                }
            }

            .fengxianList {
                width: vw(365);
                height: vh(120);

                div {
                    width: 100%;
                    height: vh(30);
                    line-height: vh(30);
                    font-size: vw(12);
                    border-bottom: 1px solid #155e75;
                    text-indent: vw(20);
                }
            }

            .videoQuery {
                width: 100%;
                height: vh(150);
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                font-size: vw(12);

                .videoList {
                    flex: 1;
                    height: vh(150);

                    div {
                        width: 100%;
                        height: vh(30);
                        line-height: vh(30);
                        border-bottom: 1px solid #155e75;
                        text-indent: vw(20);
                    }

                    div:nth-child(1) {
                        background: url('/data/images/hngk/video.png') no-repeat;
                        background-size: 100% 100%;
                    }
                }

                .video {
                    flex: 1;
                    margin-left: vw(10);

                    img {
                        width: vw(182);
                        height: vh(119);
                        border: 1px solid #ddd;
                    }
                }
            }

            .geoIntro {
                width: vw(365);
                margin-top: vh(20);
                display: flex;
                justify-content: space-between;

                .geoIntroTitle {
                    margin-bottom: vh(13);
                    display: flex;

                    .sideLine {
                        width: vw(2);
                        height: vh(15);
                        margin-right: vw(10);
                        background: #86ceeb;
                    }

                    .geoIntroWord {
                        color: #00EAFF;
                        font-size: vw(16);
                    }
                }

                .timeTabs {
                    float: right;
                    width: vw(165);
                    height: vh(22);
                    display: flex;

                    div {
                        width: vw(55);
                        height: vh(22);
                        line-height: vh(22);
                        font-size: vw(12);
                        text-align: center;
                        background: #012332;
                        border: 1px solid #1398cf;
                        cursor: pointer;
                    }

                    .active {
                        color: #00e5fd;
                    }
                }
            }
        }

        .geoIntro {
            width: vw(365);
            margin-top: vh(20);
            display: flex;
            justify-content: space-between;

            .geoIntroTitle {
                margin-bottom: vh(13);
                display: flex;

                .sideLine {
                    width: vw(2);
                    height: vh(15);
                    margin-right: vw(10);
                    background: #86ceeb;
                }

                .geoIntroWord {
                    color: #00EAFF;
                    font-size: vw(16);
                }
            }

            .timeTabs {
                float: right;
                width: vw(165);
                height: vh(22);
                display: flex;

                div {
                    width: vw(55);
                    height: vh(22);
                    line-height: vh(22);
                    font-size: vw(12);
                    text-align: center;
                    background: #012332;
                    border: 1px solid #1398cf;
                    cursor: pointer;
                }

                .active {
                    color: #00e5fd;
                }
            }
        }
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .rightKs {
        .realTime {
            margin-top: vh(10);
            width: vw1(414);
            height: vh(150);
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            .kuangshan {
                display: flex;
                justify-content: space-between;

                .kuangshanL {
                    width: vw1(69);
                    height: vh(68);
                    line-height: vh(68);
                    text-align: center;
                    background: url('/data/images/hngk/rece.png') no-repeat;
                    background-size: 100% 100%;
                }

                .kuangshanR {
                    width: vw1(292);
                    height: vh(62);
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    div {
                        display: flex;
                        justify-content: space-around;
                        flex-direction: column;
                        height: vh(62);

                        div:nth-child(1) {
                            text-align: center;
                            color: rgba(173, 248, 255, 1);
                            font-size: vw1(12);
                        }

                        div:nth-child(2) {
                            width: vw1(55);
                            height: vh(23);
                            line-height: vh(23);
                            text-align: center;
                            background: url('/data/images/hngk/kuangshan.png') no-repeat;
                            background-size: 100% 100%;
                        }
                    }
                }
            }

            .weikuang {
                display: flex;
                justify-content: space-between;

                .weikuangL {
                    width: vw1(69);
                    height: vh(68);
                    line-height: vh(68);
                    text-align: center;
                    background: url('/data/images/hngk/rece.png') no-repeat;
                    background-size: 100% 100%;
                }

                .weikuangR {
                    width: vw1(292);
                    height: vh(62);
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    div {
                        display: flex;
                        justify-content: space-around;
                        flex-direction: column;
                        height: vh(62);

                        div:nth-child(1) {
                            text-align: center;
                            color: rgba(173, 248, 255, 1);
                            font-size: vw1(12);
                        }

                        div:nth-child(2) {
                            text-align: center;
                            width: vw1(55);
                            height: vh(23);
                            line-height: vh(23);
                            background: url('/data/images/hngk/kuangshan.png') no-repeat;
                            background-size: 100% 100%;
                        }
                    }
                }
            }
        }

        #callPoliceChart {
            margin-top: vh(50);
            width: vw1(365);
            height: vh(150);
        }

        #callPoliceChart1 {
            margin-top: vh(50);
            width: vw1(365);
            height: vh(150);
        }

        #callPoliceChart2 {
            margin-top: vh(50);
            width: vw1(365);
            height: vh(150);
        }

        .rightRight {
            position: absolute;
            right: 0;
            top: 0;

            .wellTable {
                width: vw1(414);
                height: vh(240);

                table {
                    width: vw1(414);
                    height: vh(240);
                    line-height: vh(60);
                    text-align: center;
                    border-color: #155e75;
                    border-collapse: collapse;
                    font-size: vw1(14);

                    tr:nth-child(1) {
                        height: vh(25);

                        th {
                            color: rgba(30, 212, 233, 1);
                            font-size: vw1(14);
                        }
                    }

                    tr {
                        color: #fff;
                    }
                }
            }

            .fengxianList {
                width: vw1(414);
                height: vh(240);

                div {
                    width: 100%;
                    height: vh(60);
                    line-height: vh(60);
                    font-size: vw1(14);
                    border-bottom: 1px solid #155e75;
                    text-indent: vw1(20);
                }
            }

            .videoQuery {
                width: vw1(414);
                height: vh(400);
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                font-size: vw1(12);

                .videoList {
                    flex: 1;
                    height: vh(400);

                    div {
                        width: 100%;
                        height: vh(60);
                        line-height: vh(60);
                        border-bottom: 1px solid #155e75;
                        text-indent: vw1(20);
                    }

                    div:nth-child(1) {
                        background: url('/data/images/hngk/video.png') no-repeat;
                        background-size: 100% 100%;
                    }
                }

                .video {
                    flex: 1;
                    margin-left: vw1(10);

                    img {
                        width: vw1(182);
                        height: vh(119);
                        border: 1px solid #ddd;
                    }
                }
            }

            .geoIntro {
                width: vw1(365);
                margin-top: vh(20);
                display: flex;
                justify-content: space-between;

                .geoIntroTitle {
                    margin-bottom: vh(13);
                    display: flex;

                    .sideLine {
                        width: vw1(2);
                        height: vh(15);
                        margin-right: vw1(10);
                        background: #86ceeb;
                    }

                    .geoIntroWord {
                        color: #00EAFF;
                        font-size: vw1(16);
                    }
                }

                .timeTabs {
                    float: right;
                    width: vw1(165);
                    height: vh(22);
                    display: flex;

                    div {
                        width: vw1(55);
                        height: vh(22);
                        line-height: vh(22);
                        font-size: vw1(12);
                        text-align: center;
                        background: #012332;
                        border: 1px solid #1398cf;
                        cursor: pointer;
                    }

                    .active {
                        color: #00e5fd;
                    }
                }
            }
        }

        .geoIntro {
            width: vw1(365);
            margin-top: vh(20);
            display: flex;
            justify-content: space-between;

            .geoIntroTitle {
                margin-bottom: vh(13);
                display: flex;

                .sideLine {
                    width: vw1(2);
                    height: vh(15);
                    margin-right: vw1(10);
                    background: #86ceeb;
                }

                .geoIntroWord {
                    color: #00EAFF;
                    font-size: vw1(16);
                }
            }

            .timeTabs {
                float: right;
                width: vw1(165);
                height: vh(22);
                display: flex;
                display: none;

                div {
                    width: vw1(55);
                    height: vh(22);
                    line-height: vh(22);
                    font-size: vw1(12);
                    text-align: center;
                    background: #012332;
                    border: 1px solid #1398cf;
                    cursor: pointer;
                }

                .active {
                    color: #00e5fd;
                }
            }
        }
    }
}
</style>